<div class="wrapper">
  <header class="main-header">
    <!-- Logo -->
    <a routerLink="/home" class="logo">
      <!-- mini logo for sidebar mini 50x50 pixels -->
      <span class="logo-mini"><b>A</b>CM</span>
      <!-- logo for regular state and mobile devices -->
      <span class="logo-lg">程序设计教学平台</span>
    </a>
    <!-- Header Navbar: style can be found in header.less -->
    <nav class="navbar navbar-static-top">
      <!-- Sidebar toggle button-->
      <a (click)="toggleLi()" class="sidebar-toggle" data-toggle="offcanvas" role="button">
        <span class="sr-only">Toggle navigation</span>
      </a>
      <div class="navbar-custom-menu">
        <ul *ngIf="currentUser?.name" class="nav navbar-nav">
          <li class="dropdown user user-menu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">
              <img src="../assets/adminLTE/dist/img/user2-160x160.jpg" class="user-image" alt="User Image">
              <span class="hidden-xs">{{currentUser.name}}</span>
            </a>
            <ul style="width:100%;right: 0%;" class="dropdown-menu">
              <!-- Menu Footer-->
              <li style="padding: 0px;" class="user-footer">
                <div class="pull-right">
                  <a *ngIf="currentUser.exam!=true" routerLink="/user/userInfo" class="btn btn-default btn-flat">个人信息</a>
                  <a href="javascript:void(0);" (click)="doLogout()" class="btn btn-default btn-flat">退出</a>
                </div>
              </li>
            </ul>
          </li>
        </ul>
        <ul *ngIf="!currentUser?.name" class="nav navbar-nav">
          <li class="dropdown user user-menu">
            <div style="padding: 0.75rem 0.5rem;">
              <span class="hidden-xs">
                <!--<a routerLink="user/userLogin">-->
                  <button (click)="showLoginDialog()" type="button" class="btn btn-default">登录</button>
                <!--</a>-->
                <!--<a routerLink="user/userRegister">-->
                  <button (click)="showRegisterDialog()" type="button" class="btn btn-info">注册</button>
                <!--</a>-->
              </span>
            </div>
          </li>
          <!--登录界面-->
          <p-dialog header="用户登录" [(visible)]="showLoginFlag" [modal]="true" [responsive]="true" [width]="350" [minWidth]="200" [minY]="70">
            <p-header>
            </p-header>
              <form #form="ngForm" (ngSubmit)="doLogin()">
                <div class="form-group has-feedback">
                  <input name="email" [(ngModel)]="user.code" #userName="ngModel" type="email" class="form-control" placeholder="邮箱">
                  <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
                </div>
                <div class="form-group has-feedback">
                  <input name="password" [(ngModel)]="user.password" #password="ngModel" type="password" class="form-control" placeholder="密码">
                  <span class="glyphicon glyphicon-lock form-control-feedback"></span>
                </div>
              </form>
            <p-footer>
              <div style="text-align: left;">
               <span>
                 <a class="hover_a" (click)="showExamLoginDialog()">考试登录</a>/
               </span>
                <span>
                 <a class="hover_a" (click)="showRegisterDialog()">注册</a>/
               </span>
                <span>
                  <a class="hover_a" (click)="showForgetPasswordDialog()">忘记密码?</a>
                </span>
                <button (click)="doLogin()" style="float: right;margin-top: -10px;" type="submit" class="btn btn-info">登录</button>
              </div>
            </p-footer>
          </p-dialog>
          <!--/登录界面-->
          <!--注册界面-->
          <p-dialog header="用户注册" [(visible)]="showRegisterFlag" [modal]="true" [responsive]="true" [width]="350" [minWidth]="200" [minY]="70">
            <p-header>
            </p-header>
            <form #form="ngForm" (ngSubmit)="doLogin()">
              <div class="form-group has-feedback">
                <input name="email" [(ngModel)]="registerInfo.email" #userName="ngModel" type="email" class="form-control" placeholder="邮箱地址">
                <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
              </div>
              <div class="form-group has-feedback">
                <input name="password" [(ngModel)]="registerInfo.password" #password="ngModel" type="password" class="form-control" placeholder="密码-输入6到12位字符">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
              </div>
              <div class="form-group has-feedback">
                <input name="password" [(ngModel)]="registerInfo.confirmPassword" #password="ngModel" type="password" class="form-control" placeholder="重复密码">
                <span class="glyphicon glyphicon-lock form-control-feedback"></span>
              </div>
              <div class="form-group has-feedback">
                <input name="userName" [(ngModel)]="registerInfo.name" #userName="ngModel" type="email" class="form-control" placeholder="昵称">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
              </div>
            </form>
            <p-footer>
              <div style="text-align: left;">
                <span>
                 <a class="hover_a" (click)="showLoginDialog()">登录</a>/
                </span>
                <span>
                 <a class="hover_a" (click)="showExamLoginDialog()">考试登录</a>
                </span>
                <button (click)="doRegister()" style="float: right;margin-top: -10px;" type="submit" class="btn btn-info">注册</button>
              </div>
            </p-footer>
          </p-dialog>
          <!--/注册界面-->
          <!--忘记密码界面-->
          <p-dialog [(visible)]="showForgetPasswordFlag" [positionTop]="80" [modal]="true" [responsive]="true" [width]="500" [minWidth]="200" [minY]="70">
            <div class="form-group has-feedback">
              <input name="email" [(ngModel)]="forgetEmail" #userName="ngModel" type="email" class="form-control" placeholder="邮箱地址">
              <span class="glyphicon glyphicon-envelope form-control-feedback"></span>
            </div>
            <p-footer>
              <div style="text-align: center;">
                <button (click)="sendEmail()" type="submit" class="btn btn-info">发送验证邮件</button>
              </div>
            </p-footer>
          </p-dialog>
          <!--/忘记密码界面-->
          <!--考试登录界面-->
          <p-dialog header="考试登录" [(visible)]="showExamLoginFlag" [modal]="true" [responsive]="true" [width]="350" [minWidth]="200" [minY]="70">
            <p-header>
            </p-header>
            <form #form="ngForm" (ngSubmit)="doLogin()">
              <div class="form-group has-feedback">
                <input name="school" type="text" class="form-control" placeholder="zua-郑州航空工业管理学院" readonly>
              </div>
              <div class="form-group has-feedback">
                <input name="userCode" [(ngModel)]="examLoginInfo.studentNumber" #studentNumber="ngModel" type="studentNumber" class="form-control" placeholder="学号">
                <span class="glyphicon glyphicon-list-alt form-control-feedback"></span>
              </div>
              <div class="form-group has-feedback">
                <input name="userName" [(ngModel)]="examLoginInfo.name" #name="ngModel" type="name" class="form-control" placeholder="姓名">
                <span class="glyphicon glyphicon-user form-control-feedback"></span>
              </div>
            </form>
            <p-footer>
              <div style="text-align: left;">
                <span>
                 <a class="hover_a" (click)="showLoginDialog()">登录</a>/
                </span>
                <span>
                 <a class="hover_a" (click)="showRegisterDialog()">注册</a>
                </span>
                <button (click)="doExamLogin()" style="float: right;margin-top: -10px;" type="submit" class="btn btn-info">考试登录</button>
              </div>
            </p-footer>
          </p-dialog>
          <!--/考试登录界面-->
        </ul>
      </div>
    </nav>
  </header>
  <!-- Left side column. contains the logo and sidebar -->
  <aside class="main-sidebar">
    <!-- sidebar: style can be found in sidebar.less -->
    <section class="sidebar">
      <!-- Sidebar user panel -->

      <!-- search form -->

      <!-- /.search form -->
      <!-- sidebar menu: : style can be found in sidebar.less -->
      <ul class="sidebar-menu">
        <li class="header">MAIN NAVIGATION</li>
        <li id="li" class="">
          <a routerLink="/problem-sets" (click)="hideToggle()">
            <i class="glyphicon glyphicon-book"></i> <span>{{liTitle}}</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
          <ul *ngIf="toggleFlag" id="ul" class="treeview-menu menu-open">
            <li id="problemList" class="active">
              <a href="javascript:;" (click)="problemList()">
                <i class="fa fa-circle-o"></i> 题目列表
              </a>
            </li>
            <li id="submitList">
              <a href="javascript:;" (click)="submitList()">
                <i class="fa fa-circle-o"></i> 提交列表
              </a>
            </li>
            <li id="rankList">
              <a href="javascript:;" (click)="rankList()">
                <i class="fa fa-circle-o"></i> 排名
              </a>
            </li>
          </ul>
        </li>
        <li *ngIf="currentUser!=null&&currentUser.role!='student'" class="treeview">
          <a routerLink="/problems/type/6">
            <i class="glyphicon glyphicon-book"></i> <span>题库</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
        </li>
        <li *ngIf="currentUser!=null&&currentUser.role=='teacher'" class="treeview">
          <a routerLink="/user/userGroups">
            <i class="glyphicon glyphicon-user"></i> <span>用户组</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
        </li>
        <!--用户组管理-->
        <li *ngIf="currentUser!=null&&currentUser.role=='admin'" class="treeview">
          <a routerLink="/user/userManager">
            <i class="glyphicon glyphicon-user"></i> <span>用户管理</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
        </li>
        <!--/用户组管理-->
        <!--首页管理-->
        <li *ngIf="currentUser!=null&&currentUser.role=='admin'" class="treeview">
          <a routerLink="/home/homeManger">
            <i class="glyphicon glyphicon-user"></i> <span>首页管理</span>
            <span class="pull-right-container">
              <i class="fa fa-angle-left pull-right"></i>
            </span>
          </a>
        </li>
        <!--/首页管理-->
      </ul>
    </section>
    <!-- /.sidebar -->
  </aside>

  <!-- Content Wrapper. Contains page content -->
  <div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header" style="float: left;">
      <router-outlet></router-outlet>
    </section>
    <div style="clear: both"></div>
  </div>
  <!-- /.content-wrapper -->
  <footer class="main-footer">
    <div class="pull-right hidden-xs">
      <b>Version</b> 1.1.1
    </div>
    <strong>Copyright &copy; 2014-2016 <a href="http://scs.zua.edu.cn">ZZIA</a>.</strong>郑州航空工业管理学院
  </footer>
</div>
